@import './var.scss';

// nut-ui 样式修改
// Button
.nut-button {
  &.nut-button-xlarge {
    font-size: $font-size-large;
  }

  &.nut-button-default {
    color: $text-color-base;
    border: 2px solid $border-color-base;
  }

  &.nut-button-primary.nut-button-disabled {
    background-image: linear-gradient(90deg, #f76793 0%, #ff9b9d 100%);
    border-color: transparent;
    opacity: 0.4;
  }

  &.nut-button-solid.nut-button-disabled {
    color: $text-color-disabled;
    background-color: $background-color-disabled;
    border-color: $background-color-disabled;
  }
}

// Form
.nut-form {
  .nut-form-item-body {
    // overflow: hidden;
  }

  .nut-cell-group-wrap {
    background-color: transparent;
    margin: 0;

    & > .nut-form-footer {
      margin-top: 64px;
      background-color: transparent;
    }
    & > view {
      margin-bottom: 16px;
    }
  }

  // form-with-footer 类名是自己定义的，用来修改大表单样式
  &.form-large {
    .nut-form-item {
      &:not(:first-child) {
        margin-top: 32px;
      }
    }

    .nut-cell {
      padding: 24px 0;
    }
  }

  .nut-form-item-body-tips {
    font-size: $font-size-base;
  }
}

// Tabs
.nut-tabs {
  &.nut-tabs-vertical {
    .nut-tabs-titles {
      width: 100%;
      background-color: #f5f5fa;

      &-item {
        height: 112px;
        color: $text-color-base;
        font-size: 30px;

        &-active {
          font-size: $font-size-large;
          font-weight: 600;
          color: $color-primary;
          background-color: #ffffff;

          .nut-tabs-titles-item-line {
            width: 6px;
            height: 32px;
            background: $color-primary;
          }
        }
      }
    }
  }

  .nut-tabs-titles {
    background: #ffffff;

    &-item {
      color: $text-color-secondary;

      &-active {
        color: $color-primary;
      }
    }
  }
}

// checkbox
.nut-checkbox {
  .nut-icon {
    width: 32px;
    height: 32px;
  }

  .nut-checkbox-label {
    font-size: $font-size-small;
    color: $text-color-secondary;
    font-weight: 400;
  }
}

// input
.nut-input {
  .input-placeholder {
    color: $text-color-placeholder;
  }
}

// textarea
.nut-textarea {
  .textarea-placeholder {
    color: $text-color-placeholder;
  }
}

.m-section-header.m-title {
  margin-bottom: 24px !important;
}
